.flex-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .line_ellipsis_1 {
    overflow: hidden;
    white-space: nowrap;
    /*先强制一行内显示文本,不换行*/
    text-overflow: ellipsis;
    /*文字用省略号替代超出的部分*/
  }
  .line_ellipsis_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    /*文本溢出显示省略号*/
    display: -webkit-box;
    /*弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 2;
    /*限制在一个块元素显示的文本的行数*/
    -webkit-box-orient: vertical;
    /*设置或检索伸缩盒对象的子元素的排列方式*/
  }
  .box {
    width: 500px;
    height: 800px;
    color: red;
    border: 2px solid red;
    background-color: skyblue;
  }
  .box .goods-name {
    margin: 5px;
    width: 100px;
    border: 2px solid #237c17;
    height: 40px;
    padding: 4px;
  }
  .box .title {
    margin: 5px;
    width: 100px;
    border: 2px solid #827ab3;
  }
  .box .list {
    list-style-type: none;
  }
  .box .list-item {
    line-height: 50px;
    padding: 4px;
    border: 1px solid orange;
  }
  .box .list-item:hover {
    font-size: 30px;
  }
  .box .footer {
    font-size: 30px;
    text-align: center;
    background-color: brown;
  }
  .box .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
    border: 2px solid #ccc;
    margin: 20px auto;
  }
  .box .star {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
    border: 2px solid green;
    margin: 0 auto;
  }  